@using jiuyuan.服务
@using jiuyuan.数据.基础数据类
@using jiuyuan.管理器

<div class="admin-container">
    <div class="admin-header">
        <h3>技能管理</h3>
        <button class="btn-primary" @onclick="添加新技能">添加新技能</button>
    </div>

    <div class="admin-content">
        @if (!数据已加载)
        {
            <div class="loading">正在加载数据...</div>
        }
        else
        {
            <div class="item-list">
                @foreach (var 技能 in 显示技能列表)
                {
                    <div class="item-card">
                        <div class="item-info">
                            <h4>@技能.名称</h4>
                            <p>等级要求: @技能.等级要求</p>
                            <p>消耗魔法值: @技能.消耗魔法值</p>
                            <p>元素类型: @GetElementType((int)技能.元素类型)</p>
                        </div>
                        <div class="item-actions">
                            <button class="action-button view-button" @onclick='() => 查看技能详情(技能)'>查看</button>
                            <button class="action-button edit-button" @onclick='() => 编辑技能(技能)'>编辑</button>
                            <button class="action-button delete-button" @onclick='() => 删除技能(技能.Id)'>删除</button>
                        </div>
                    </div>
                }
            </div>
        }
    </div>
</div>

<!-- 技能详情弹窗 -->
<div class="modal" style="display: @(显示详情弹窗 ? "block" : "none");">
    <div class="modal-content">
        <div class="modal-header">
            <h3>技能详情</h3>
            <button class="close-button" @onclick="关闭详情弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (选中的技能 != null)
            {
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>技能名称:</label>
                        <span>@选中的技能.名称</span>
                    </div>
                    <div class="detail-item">
                        <label>等级要求:</label>
                        <span>@选中的技能.等级要求</span>
                    </div>
                    <div class="detail-item">
                        <label>消耗魔法值:</label>
                        <span>@选中的技能.消耗魔法值</span>
                    </div>
                    <div class="detail-item">
                        <label>冷却时间:</label>
                        <span>@选中的技能.冷却时间 秒</span>
                    </div>
                    <div class="detail-item">
                        <label>元素类型:</label>
                        <span>@GetElementType((int)选中的技能.元素类型)</span>
                    </div>
                    <div class="detail-item">
                        <label>目标类型:</label>
                        <span>@GetTargetType((int)选中的技能.目标类型)</span>
                    </div>
                    <div class="detail-item">
                        <label>图标:</label>
                        <span>@选中的技能.图标</span>
                    </div>
                    <div class="detail-item full-width">
                        <label>描述:</label>
                        <span>@选中的技能.描述</span>
                    </div>
                    <div class="detail-item">
                        <label>创建时间:</label>
                        <span>@选中的技能.创建时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                    <div class="detail-item">
                        <label>更新时间:</label>
                        <span>@选中的技能.更新时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

<!-- 编辑技能弹窗 -->
<div class="modal" style="display: @(显示编辑弹窗 ? "block" : "none");">
    <div class="modal-content">
        <div class="modal-header">
            <h3>@(IsEditing ? "编辑技能" : "添加新技能")</h3>
            <button class="close-button" @onclick="关闭编辑弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (当前技能 != null)
            {
                <div class="form-grid">
                    <div class="form-group">
                        <label for="skillName">技能名称:</label>
                        <input type="text" id="skillName" @bind="当前技能.名称" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="skillLevel">等级要求:</label>
                        <input type="number" id="skillLevel" @bind="当前技能.等级要求" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="skillManaCost">消耗魔法值:</label>
                        <input type="number" id="skillManaCost" @bind="当前技能.消耗魔法值" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="skillCooldown">冷却时间(秒):</label>
                        <input type="number" id="skillCooldown" @bind="当前技能.冷却时间" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="skillElementType">元素类型:</label>
                        <select id="skillElementType" @bind="当前技能.元素类型" class="form-control">
                            <option value="无">无</option>
                            <option value="火">火</option>
                            <option value="水">水</option>
                            <option value="风">风</option>
                            <option value="土">土</option>
                            <option value="物理">物理</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="skillTargetType">目标类型:</label>
                        <select id="skillTargetType" @bind="当前技能.目标类型" class="form-control">
                            <option value="自身">自身</option>
                            <option value="友方单体">友方单体</option>
                            <option value="友方群体">友方群体</option>
                            <option value="敌方单体">敌方单体</option>
                            <option value="敌方群体">敌方群体</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="skillIcon">图标:</label>
                        <input type="text" id="skillIcon" @bind="当前技能.图标" class="form-control" />
                    </div>
                    <div class="form-group full-width">
                        <label for="skillDescription">描述:</label>
                        <textarea id="skillDescription" @bind="当前技能.描述" class="form-control" rows="3"></textarea>
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn-primary" @onclick="保存技能">@(!IsEditing ? "添加" : "更新")</button>
                    <button class="btn-secondary" @onclick="关闭编辑弹窗">取消</button>
                </div>
            }
        </div>
    </div>
</div>

<style>
    .admin-container {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .admin-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #4a2c8d;
    }

    .admin-content {
        flex: 1;
        overflow-y: auto;
    }

    .item-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .item-card {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 8px;
        padding: 20px;
        transition: all 0.3s ease;
    }

    .item-card:hover {
        background-color: rgba(40, 40, 80, 0.9);
        border-color: #6a0dad;
        box-shadow: 0 0 15px rgba(106, 13, 173, 0.5);
    }

    .item-info h4 {
        color: #b19cd9;
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

    .item-info p {
        color: #a0a0e0;
        margin: 5px 0;
        font-size: 0.9rem;
    }

    .item-actions {
        display: flex;
        gap: 10px;
        margin-top: 15px;
        justify-content: flex-end;
    }

    .action-button {
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9rem;
    }

    .view-button {
        background-color: rgba(30, 60, 120, 0.8);
        color: #a0c0ff;
    }

    .view-button:hover {
        background-color: rgba(40, 80, 160, 0.9);
        box-shadow: 0 0 10px rgba(64, 128, 255, 0.5);
    }

    .edit-button {
        background-color: rgba(60, 120, 60, 0.8);
        color: #a0ffa0;
    }

    .edit-button:hover {
        background-color: rgba(80, 160, 80, 0.9);
        box-shadow: 0 0 10px rgba(128, 255, 128, 0.5);
    }

    .delete-button {
        background-color: rgba(120, 60, 60, 0.8);
        color: #ffa0a0;
    }

    .delete-button:hover {
        background-color: rgba(160, 80, 80, 0.9);
        box-shadow: 0 0 10px rgba(255, 128, 128, 0.5);
    }

    .small {
        padding: 5px 10px;
        font-size: 0.8rem;
    }

    .btn-primary {
        padding: 10px 20px;
        background: linear-gradient(to right, #4a2c8d, #6a0dad);
        border: none;
        border-radius: 5px;
        color: white;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .btn-primary:hover {
        background: linear-gradient(to right, #5a3c9d, #7a1ddd);
        box-shadow: 0 0 15px rgba(106, 13, 173, 0.7);
    }

    .btn-secondary {
        padding: 10px 20px;
        background: linear-gradient(to right, #3a3a5a, #5a5a7a);
        border: none;
        border-radius: 5px;
        color: #e0e0ff;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 1rem;
    }

    .btn-secondary:hover {
        background: linear-gradient(to right, #4a4a6a, #6a6a8a);
        box-shadow: 0 0 15px rgba(90, 90, 122, 0.7);
    }

    .btn-group {
        display: flex;
        gap: 15px;
        margin-top: 20px;
        justify-content: flex-end;
    }

    .loading {
        text-align: center;
        padding: 30px;
        color: #a0a0e0;
        font-size: 1.2rem;
    }

    /* 弹窗样式 */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        background-color: rgba(20, 20, 40, 0.95);
        border: 2px solid #4a2c8d;
        border-radius: 10px;
        width: 90%;
        max-width: 800px;
        max-height: 90%;
        overflow-y: auto;
        box-shadow: 0 0 30px rgba(106, 13, 173, 0.8);
    }

    .modal-content.large {
        max-width: 1000px;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #4a2c8d;
    }

    .modal-header h3 {
        color: #b19cd9;
        margin: 0;
    }

    .close-button {
        background: none;
        border: none;
        color: #b19cd9;
        font-size: 1.8rem;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .close-button:hover {
        color: #ff5555;
    }

    .modal-body {
        padding: 20px;
    }

    /* 表单样式 */
    .form-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
        margin-bottom: 20px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-group label {
        display: block;
        margin-bottom: 5px;
        color: #a0a0e0;
        font-weight: 500;
    }

    .form-control {
        width: 100%;
        padding: 10px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        color: #e0e0ff;
        font-size: 1rem;
    }

    .form-control:focus {
        outline: none;
        border-color: #6a0dad;
        box-shadow: 0 0 10px rgba(106, 13, 173, 0.5);
    }

    textarea.form-control {
        resize: vertical;
        min-height: 80px;
    }

    select.form-control {
        appearance: none;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a0a0e0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 15px;
    }

    /* 详情样式 */
    .detail-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }

    .detail-item {
        margin-bottom: 15px;
    }

    .detail-item.full-width {
        grid-column: 1 / -1;
    }

    .detail-item label {
        display: block;
        color: #a0a0e0;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .detail-item span {
        display: block;
        color: #e0e0ff;
        padding: 8px;
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
    }

    /* 无数据提示 */
    .no-data {
        text-align: center;
        padding: 20px;
        color: #a0a0e0;
        font-style: italic;
    }
</style>

@code {
    // 注入服务
    [Inject] public 配置加载器 配置加载器 { get; set; } = default!;
    [Inject] public ILogger<技能管理> Logger { get; set; } = default!;

    // 实际的技能数据列表（从数据库获取）
    private List<技能配置> 技能列表 = [];
    
    // 用于显示的技能列表（直接使用实际技能数据）
    private List<技能配置> 显示技能列表 = [];
    
    private bool 数据已加载 = false;

    private 技能配置 当前技能 = new 技能配置();
    private 技能配置 选中的技能 = new 技能配置();
    private bool IsEditing = false;
    private Guid 编辑中的技能Id = Guid.Empty;
    private bool 显示详情弹窗 = false;
    private bool 显示编辑弹窗 = false;

    // 页面初始化时加载数据
    protected override async Task OnInitializedAsync()
    {
        await 加载技能数据();
    }

    // 从数据库加载技能数据
    private async Task 加载技能数据()
    {
        try
        {
            技能列表 = await 配置加载器.获取所有技能();
            显示技能列表 = 技能列表;
            
            数据已加载 = true;
            StateHasChanged();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "加载技能数据时发生错误");
        }
    }

    private void 查看技能详情(技能配置 技能)
    {
        选中的技能 = 技能;
        显示详情弹窗 = true;
    }

    private void 关闭详情弹窗()
    {
        显示详情弹窗 = false;
    }

    private void 添加新技能()
    {
        当前技能 = new 技能配置();
        IsEditing = false;
        编辑中的技能Id = Guid.Empty;
        显示编辑弹窗 = true;
    }

    private void 编辑技能(技能配置 技能)
    {
        当前技能 = new 技能配置
        {
            Id = 技能.Id,
            名称 = 技能.名称,
            描述 = 技能.描述,
            等级要求 = 技能.等级要求,
            图标 = 技能.图标,
            创建时间 = 技能.创建时间,
            更新时间 = 技能.更新时间,
            消耗魔法值 = 技能.消耗魔法值,
            冷却时间 = 技能.冷却时间,
            元素类型 = 技能.元素类型,
            目标类型 = 技能.目标类型,
            效果类型 = 技能.效果类型,
            效果ID列表 = new List<Guid>(技能.效果ID列表),
            效果列表 = new List<技能效果>(技能.效果列表)
        };
        IsEditing = true;
        编辑中的技能Id = 技能.Id;
        显示编辑弹窗 = true;
    }

    private void 关闭编辑弹窗()
    {
        显示编辑弹窗 = false;
    }

    private async Task 删除技能(Guid 技能Id)
    {
        var 技能 = 显示技能列表.FirstOrDefault(s => s.Id == 技能Id);
        if (技能 != null)
        {
            显示技能列表.Remove(技能);
            技能列表.Remove(技能);
            
            // 从数据库中删除技能
            // 注意：这里应该调用配置加载器的删除方法，但目前没有实现
            // 作为临时解决方案，我们重新加载数据
            await 加载技能数据();
        }
    }

    private async Task 保存技能()
    {
        if (string.IsNullOrWhiteSpace(当前技能.名称))
            return;

        try
        {
            // 保存到数据库
            await 配置加载器.保存技能配置(当前技能);
            
            // 更新显示列表
            if (!IsEditing)
            {
                // 添加新技能
                显示技能列表.Add(当前技能);
                技能列表.Add(当前技能);
            }
            else
            {
                // 更新现有技能
                var existingSkill = 显示技能列表.FirstOrDefault(s => s.Id == 编辑中的技能Id);
                if (existingSkill != null)
                {
                    var index = 显示技能列表.IndexOf(existingSkill);
                    显示技能列表[index] = 当前技能;
                    
                    var originalIndex = 技能列表.IndexOf(existingSkill);
                    技能列表[originalIndex] = 当前技能;
                }
            }

            // 关闭弹窗
            显示编辑弹窗 = false;
            
            // 重新加载数据以确保一致性
            await 加载技能数据();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "保存技能时发生错误");
        }
    }

     string GetElementType(int 元素类型) => 元素类型 switch
        {
            0 => "无",
            1 => "火",
            2 => "水",
            3 => "风",
            4 => "土",
            5 => "物理",
            _ => "未知"
        };

    private string GetTargetType(int 目标类型)
    {
        return 目标类型 switch
        {
            0 => "自身",
            1 => "友方单体",
            2 => "友方群体",
            3 => "敌方单体",
            4 => "敌方群体",
            _ => "未知"
        };
    }
}